$def with(data_list,chart_data_array,line_name_dict,stations,selected_stations,selected_start_date,selected_end_date,data_type_names,data_type_titles,reference_compute_avg)
<!--警告：不能格式化重排代码-->
<script>

$if selected_stations:
    $for item in selected_stations:
        console.log('$item')
$for k, v in line_name_dict.items()
    $if k=='line00':
        $continue
    console.log('$k'+","+'$v')
</script>
<h3 class="page-title">各指标长期连续曲线<small>(显示某些监测站的某些监测指标在一段时期内的按时段平均值数据（时段从00-23）)</small></h3>
<div class="tool_bar_buttons">
    <form action="/type_charts/date_range_chart" class="">
        <div class="control-group  form-inline">
            <label class="checkbox inline "> <strong>数据:</strong></label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_no2" id="chb_avg_no2"> NO₂(μg/m³)
            </label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_o3" id="chb_avg_o3"> O₃(μg/m³)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_pm10" id="chb_avg_pm10"> PM10(μg/m³)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_pm25" id="chb_avg_pm25"> PM2.5(μg/m³)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_co" id="chb_avg_co"> CO(mg/m³)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_so2" id="chb_avg_so2"> SO₂(μg/m³)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_humidity" id="chb_avg_humidity"> 湿度(%rh)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_wind_direction" id="chb_avg_wind_direction">
                风向(a)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_wind_speed" id="chb_avg_wind_speed"> 风速(m/s)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_atmosphere" id="chb_avg_atmosphere"> 大气压(MPa)</label>
            <label class="checkbox inline">
                <input type="checkbox" name="data_type" value="avg_temperature" id="chb_avg_temperature"> 温度(°C)</label>
        </div>

        <div class="control-group  form-inline">
            <label class="checkbox inline "> <strong>监测站:</strong></label>
            $for station in stations:
                <label class="checkbox inline">
                    <input type="checkbox" name="stations" id="chb_$station.name" value="$station.name"> $station.name
                </label>

            <label class="checkbox inline "> <strong> 日期范围:</strong></label>

            <div class="controls input-append date form_date" data-date-format="yyyy-mm-dd" data-link-field="dateStart"
                 data-link-format="yyyy-mm-dd">
                <input size="8" type="text" value="$selected_start_date" readonly>
                <span class="add-on"><i class="icon-remove"></i></span>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
            <input name="dateStart" type="hidden" id="dateStart" value="$selected_start_date"/>--
            <div class="controls input-append date form_date" data-date-format="yyyy-mm-dd" data-link-field="dateEnd"
                 data-link-format="yyyy-mm-dd">
                <input size="8" type="text" value="$selected_end_date" readonly>
                <span class="add-on"><i class="icon-remove"></i></span>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
            <input name="dateEnd" type="hidden" id="dateEnd" value="$selected_end_date"/>
            <label class="checkbox inline "> <strong>参考数据:</strong></label>
            <label class="checkbox inline">
                <input type="checkbox" name="reference_compute_avg" value="True" id="chb_reference_compute_avg"> 自动计算平均值</label>
            <button type="submit" class="btn btn-primary">绘制曲线</button>
        </div>
    </form>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:600px"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title: {
            text: "监测站[$', '.join(selected_stations)]",
            subtext: "日期($selected_start_date - $selected_end_date)",
            x:'left',
            y:'top',
            textAlign:'left'
        },
        grid: {top:60},//增加标题栏区域高度
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            x: 'center',
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar', 'stack', 'tiled']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false

        }],
        $ large_label=''
        $ small_label=''
        $for item in data_type_titles:
            $if item==u'CO(mg/m³)' or item==u'风速(m/s)' or item==u'温度(°C)':
                $ small_label=small_label+ item+"\\n "
            $else:
                $ large_label=large_label+ item+"\\n "

        yAxis: [
            {
				type : 'value',
				nameRotate: 0,
				nameGap: 30,
                nameLocation: "middle",
				name : '$large_label'
            },
            {
				type : 'value',
				nameRotate: 0,
				nameGap: 30,
                nameLocation: "middle",
				name : '$small_label'
            }
        ],
        dataZoom: [{
					type: 'inside',
					start: 70,
					end: 100
				}, {
					start: 70,
					end: 100,
					handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
					handleSize: '80%',
					handleStyle: {
						color: '#fff',
						shadowBlur: 3,
						shadowColor: 'rgba(0, 0, 0, 0.6)',
						shadowOffsetX: 2,
						shadowOffsetY: 2
					}
				}],
        series: [
        //曲线的数量和坐标轴
        $for k, v in line_name_dict.items():
            $if k=='line00':
                $ continue
            {type: 'line',
            $if reference_compute_avg:
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                },
            $if k.startswith('avg_co') or k.startswith('avg_wind_speed'):
                yAxisIndex:1,
            $else:
                yAxisIndex:0,
            smooth:0.2,seriesLayoutBy: 'row'},
        ]
    };

    //页面加载   获取全部信息
    var data ={"source":$:chart_data_array}//不转义
    option.dataset = data;
    myChart.setOption(option);
    myChart.hideLoading();
    console.log("mychart init");
</script>
<div class="">
    <table class="table table-striped table-bordered rounded-corner">
        <thead>
        <tr>
            <th>监测站</th>
            <th>日期</th>
            <th>时段</th>
            <th>NO₂(μg/m³)</th>
            <th>O₃(μg/m³)</th>
            <th>PM10(μg/m³)</th>
            <th>PM2.5(μg/m³)</th>
            <th>CO(mg/m³)</th>
            <th>SO₂(μg/m³)</th>
            <th>湿度(%rh)</th>
            <th>风向(a)</th>
            <th>风速(m/s)</th>
            <th>大气压(MPa)</th>
            <th>温度(°C)</th>

        </tr>
        </thead>
        <tbody>

        $ i=0
        $ line_style='even'
        $for data in data_list:
            $if i&1 :
                $ line_style='odd'
            $else:
                $ line_style='even'
            $ i=i+1
            <tr class="$line_style">
                <td>$data.site</td>
                <td>$data.collection_date</td>
                <td>$data.collection_hour</td>
                <td>$data.avg_no2</td>
                <td>$data.avg_o3</td>
                <td>$data.avg_pm10</td>
                <td>$data.avg_pm25</td>
                <td>$data.avg_co</td>
                <td>$data.avg_so2</td>
                <td>$data.avg_humidity</td>
                <td>$data.avg_wind_direction</td>
                <td>$data.avg_wind_speed</td>
                <td>$data.avg_atmosphere</td>
                <td>$data.avg_temperature</td>

            </tr>

        </tbody>
    </table>

</div>

<script>
$$(document).ready(function(){
    //设置已选择的数据类型
    set_selected_params();
    function set_selected_params(){
        $$("[name='data_type']").removeAttr("checked");//取消全选
        var data_type_list=new Array();
        $ i=0;
        $for item in data_type_names:
            data_type_list[$i]='$item';
            $ i=i+1

        for ( var i = 0; i <data_type_list.length; i++){
            console.log(data_type_list[i]);
            $$('#chb_'+data_type_list[i]).attr("checked",'true');
        }
        //设置监测站选中
        $$("[name='stations']").removeAttr("checked");//取消全选
        $if selected_stations:
            $for item in selected_stations:
                $$('#chb_$item').attr("checked",'true');

        //设置参考数据选项
        $if reference_compute_avg:
            $$('#chb_reference_compute_avg').attr("checked",'true');
        $else:
            $$('#chb_reference_compute_avg').removeAttr("checked");
    }
    $$('.form_datetime').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1
    });
    $$('.form_month').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 3,
		minView: 3,
		forceParse: 0
    });
    $$('.form_date').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
    });
	$$('.form_time').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 1,
		minView: 0,
		maxView: 1,
		forceParse: 0
    });
    })
</script>
